import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getChannelsAction, updateIdAction } from '../store/action/channel';

export default function Channel() {
  const { channelList, currentId } = useSelector((state) => state.channel);
  // console.log('channelList -----> ', channelList);
  const dispatch = useDispatch();
  // 3. 页面渲染完成后，发送请求
  useEffect(() => {
    dispatch(getChannelsAction());
    // 把 dispatch 当做依赖，放到数组中
  }, [dispatch]);

  return (
    <ul className="category">
      {channelList.map((item) => {
        return (
          <li
            className={item.id === currentId ? 'select' : ''}
            key={item.id}
            onClick={() => dispatch(updateIdAction(item.id))}
          >
            {item.name}
          </li>
        );
      })}
    </ul>
  );
}
